import './TrendChart.scss'
import { LineConfigA01Template } from './AssetsCharts'
import { useRef, useState, useef } from 'react'
import { useMount, useSize } from 'ahooks'

import dayjs from 'dayjs'

const style = {
    ColumnColor:
        'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
    YMin: 200,
}

export const TrendChartA01 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const str = 2

    const [Data, setData] = useState([])

    useMount(() => {
        const time = dayjs().second(0).format('YYYY-MM-DD HH:mm:ss')
        lastFunc(time)
    })

    const lastFunc = time => {
        const cyclicArray = Array(20).fill()
        const data = cyclicArray
            .map((_, index) => {
                return [
                    {
                        name: '南岸方量',
                        type: dayjs(time)
                            .add(0 - index * str, 'second')
                            .format('HH:mm:ss'),
                        value: Math.floor(Math.random() * (400 - 200 + 1)) + 200,
                    },
                    {
                        name: '北岸方量',
                        type: dayjs(time)
                            .add(0 - index * str, 'second')
                            .format('HH:mm:ss'),
                        value: Math.floor(Math.random() * (400 - 200 + 1)) + 200,
                    },
                ]
            })
            .flatMap(item => item)
            .reverse()
        setData(data)
        timeFunc(time, data)
    }

    const timeFunc = (time, data) => {
        // console.log('[时间]', time)
        // console.log('[数据]', data)
        const nest = dayjs(time).add(str, 'second').format('HH:mm:ss')
        const last = dayjs(time).add(str, 'second').format('YYYY-MM-DD HH:mm:ss')
        const arr = [
            { name: '南岸方量', type: nest, value: Math.floor(Math.random() * (400 - 200 + 1)) + 200 },
            { name: '北岸方量', type: nest, value: Math.floor(Math.random() * (400 - 200 + 1)) + 200 },
        ]
        data.splice(0, 2)
        data.push(...arr)
        setTimeout(() => {
            setData([...data])
            timeFunc(last, data)
        }, str * 1000)
    }

    return (
        <div className="TrendChartA01" ref={ChartsBox}>
            {size && Date && <LineConfigA01Template data={Data} size={size} style={style} />}
        </div>
    )
}
